import React, { Component } from "react";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import Middle from "../../components/Middle/Middle";
import Mvcont from "../../components/MvCont/Mvcont";

class Home extends Component {
  state = {
    middlearr: [
      { title: "HTML", cont: "掌握", checked: false },
      { title: "CSS", cont: "了解", checked: false },
      { title: "JS", cont: "精通", checked: false },
      { title: "ES6", cont: "入门", checked: false },
      { title: "Nodejs", cont: "入土", checked: false },
      { title: "exprose", cont: "了解", checked: false },
      { title: "webpack", cont: "入土", checked: false },
      { title: "react", cont: "入门", checked: false },
      { title: "vue", cont: "不懂", checked: false },
    ], // middle 数据

    mvarr: [
      {
        id: 5334103,
        cover:
          "http://p1.music.126.net/G09rskU97H10HPPowgUIng==/1426066593488734.jpg",
        name: "温暖你的冬 录音花絮2",
        playCount: 61787,
        briefDesc: null,
        desc: null,
        artistName: "欧阳娜娜",
        artistId: 1087140,
        duration: 146470,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 1087140,
            name: "欧阳娜娜",
            alias: ["Nana Ou-yang", "娜比"],
            transNames: null,
          },
        ],
      },
      {
        id: 10928981,
        cover:
          "http://p1.music.126.net/Sacm9rVUjFIagBJ3KLfVHw==/109951164920088043.jpg",
        name: "BilalTallanma",
        playCount: 170126,
        briefDesc: null,
        desc: null,
        artistName: "Bilal Enwer",
        artistId: 1039011,
        duration: 1455000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 1039011,
            name: "Bilal Enwer",
            alias: [],
            transNames: null,
          },
        ],
      },
      {
        id: 10880673,
        cover:
          "http://p1.music.126.net/jvHGykRirEXz1hzqNEnPCA==/109951164240795974.jpg",
        name: "起风了",
        playCount: 6033623,
        briefDesc: "吴青峰热单《起风了》MV公开！",
        desc: null,
        artistName: "吴青峰",
        artistId: 187229,
        duration: 303000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 187229,
            name: "吴青峰",
            alias: ["可人儿", "吴啾咪", "Greeny"],
            transNames: null,
          },
        ],
      },
      {
        id: 10929612,
        cover:
          "http://p1.music.126.net/x9oKLgPzfqKbwExhd1RmRA==/109951164922321089.jpg",
        name: "덤더럼 (Dumhdurum) | SBS人气歌谣 20/04/19 现场版",
        playCount: 95710,
        briefDesc: null,
        desc: null,
        artistName: "Apink",
        artistId: 126277,
        duration: 226000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 126277,
            name: "Apink",
            alias: ["에이핑크", "A pink", "阿粉"],
            transNames: ["에이핑크"],
          },
        ],
      },
      {
        id: 10862189,
        cover:
          "http://p1.music.126.net/rHAgVJmMnIfFTry6W9tJmw==/109951163962637943.jpg",
        name: "上学威龙",
        playCount: 4757901,
        briefDesc: null,
        desc: null,
        artistName: "法老",
        artistId: 865007,
        duration: 214000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 865007,
            name: "法老",
            alias: [],
            transNames: null,
          },
        ],
      },
      {
        id: 10862160,
        cover:
          "http://p1.music.126.net/H6wSPKjK54lkw0ZJFBIa8Q==/109951163962253077.jpg",
        name: "bad guy",
        playCount: 17694915,
        briefDesc: null,
        desc: null,
        artistName: "Billie Eilish",
        artistId: 11972054,
        duration: 205000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 11972054,
            name: "Billie Eilish",
            alias: ["碧梨", "Billie Eilish Pirate Baird O'Connell"],
            transNames: ["比莉·艾利什"],
          },
        ],
      },
      {
        id: 10919322,
        cover:
          "http://p1.music.126.net/ZQ-gtRQ9V62nsMV9HKfweg==/109951164771170702.jpg",
        name: "BTS (방탄소년단) 'Black Swan' Official MV",
        playCount: 1945495,
        briefDesc: null,
        desc: null,
        artistName: "BTS (防弹少年团)",
        artistId: 783124,
        duration: 217000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 783124,
            name: "BTS (防弹少年团)",
            alias: [
              "방탄소년단",
              "BTS",
              "Bangtan Boys",
              "胖蛋",
              "防弹少年团",
              "bts 防弹少年团",
            ],
            transNames: null,
          },
        ],
      },
      {
        id: 5617045,
        cover:
          "http://p1.music.126.net/AeqFssNiKB-aKodmx-KhUw==/18793952255574830.jpg",
        name: "Ablikim-Ablimit ( Talwa Qiz )",
        playCount: 466199,
        briefDesc: null,
        desc: null,
        artistName: "Ablikim Ablimit",
        artistId: 12118166,
        duration: 251030,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 12118166,
            name: "Ablikim Ablimit",
            alias: null,
            transNames: null,
          },
        ],
      },
      {
        id: 10929390,
        cover:
          "http://p1.music.126.net/2cXJJRroBgy2wULzQ0SQlg==/109951165923968787.jpg",
        name: "Wheels on the Bus",
        playCount: 178364,
        briefDesc: null,
        desc: null,
        artistName: "斑马儿歌",
        artistId: 35229524,
        duration: 152000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 35229524,
            name: "斑马儿歌",
            alias: [],
            transNames: null,
          },
        ],
      },
      {
        id: 5696012,
        cover:
          "http://p1.music.126.net/EknvVEOf8QZos6dwMOWO-w==/109951163053400031.jpg",
        name: "Uyghur kizi",
        playCount: 845514,
        briefDesc: null,
        desc: null,
        artistName: "Abdugini Ablikim",
        artistId: 12038158,
        duration: 188290,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 12038158,
            name: "Abdugini Ablikim",
            alias: null,
            transNames: null,
          },
        ],
      },
      {
        id: 10929614,
        cover:
          "http://p1.music.126.net/Rp-IJ6LpijaP1lptAVuCOw==/109951167725323260.jpg",
        name: "Oh my god | MBC音乐中心 20/04/18 现场版",
        playCount: 61365,
        briefDesc: null,
        desc: null,
        artistName: "(G)I-DLE",
        artistId: 14055085,
        duration: 200000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 14055085,
            name: "(G)I-DLE",
            alias: [
              "(여자)아이들",
              "Cube新女团",
              "女孩子",
              "女孩子们",
              "여자 아이들",
              "女娃",
              "gidle",
            ],
            transNames: null,
          },
        ],
      },
      {
        id: 10894787,
        cover:
          "http://p1.music.126.net/GdOK2X9pAIU3YroZkHHA0w==/109951164417513957.jpg",
        name: "Phoenix 涅槃 (英雄联盟2019全球总决赛主题曲)",
        playCount: 5633378,
        briefDesc: null,
        desc: null,
        artistName: "Cailin Russo",
        artistId: 12334074,
        duration: 208000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 12334074,
            name: "Cailin Russo",
            alias: [],
            transNames: null,
          },
          {
            id: 964410,
            name: "Chrissy Costanza",
            alias: [],
            transNames: null,
          },
          {
            id: 1047337,
            name: "英雄联盟",
            alias: ["英雄联盟", "撸啊撸", "lol", "League of Legends"],
            transNames: null,
          },
        ],
      },
      {
        id: 10929578,
        cover:
          "http://p1.music.126.net/o9Rh84cpIF8BpnGyJTW2gA==/109951165526929399.jpg",
        name: "Verde",
        playCount: 20284,
        briefDesc: null,
        desc: null,
        artistName: "J. Balvin",
        artistId: 309127,
        duration: 250000,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 309127,
            name: "J. Balvin",
            alias: ["J Balvin", "j balvin"],
            transNames: null,
          },
          {
            id: 999423,
            name: "Sky",
            alias: ["soft rock /classical band", "soft rock /classical band"],
            transNames: null,
          },
        ],
      },
      {
        id: 462450,
        cover:
          "http://p1.music.126.net/NZSgYJrX1zgOGTP10oqv1g==/7888995930490851.jpg",
        name: "Counting Sheep (Official Video)",
        playCount: 6972242,
        briefDesc: null,
        desc: null,
        artistName: "SAFIA",
        artistId: 986155,
        duration: 173080,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 986155,
            name: "SAFIA",
            alias: [],
            transNames: null,
          },
        ],
      },
      {
        id: 5336769,
        cover:
          "http://p1.music.126.net/BRNTmHJI0SilrYPm2t_TMA==/3251255892352165.jpg",
        name: "小学生广播体操七彩阳光",
        playCount: 1235198,
        briefDesc: null,
        desc: null,
        artistName: "群星",
        artistId: 122455,
        duration: 281920,
        mark: 0,
        subed: false,
        artists: [
          {
            id: 122455,
            name: "群星",
            alias: ["原声带", "Various Artists", "华语群星"],
            transNames: null,
          },
        ],
      },
    ], //mvCont 数据

    toparr: [
      { title: "首页", checked: true },
      { title: "HTML", checked: false },
      { title: "CSS", checked: false },
      { title: "JAVAscript", checked: false },
      { title: "React", checked: false },
    ],
    index: 0, //标记选中导航的下标
    //  Header 中的数据
  };

  changeck = (i) => {
    return () => {
      let newmiddlearr = this.state.middlearr;
      newmiddlearr[i].checked = !newmiddlearr[i].checked;

      this.setState({
        middlearr: newmiddlearr,
      });
    };
  };

  // 改变导航样式
  sychange = (i) => {
    return () => {
      let newarr = this.state.toparr;
      // 方式一     排他 重置所有样式
      // newarr.forEach(item => {
      //     item.checked = false;
      // })

      // 方式二  利用标记法 清除上一次的checked值
      newarr[this.state.index].checked = false;
      newarr[i].checked = true;

      //修改 state 数据
      this.setState({
        toparr: newarr,
        index: i,
      });
    };
  };

  render() {
    return (
      <>
        <Header toparr={this.state.toparr} sychange={this.sychange}></Header>
        <Middle
          middlearr={this.state.middlearr}
          changeck={this.changeck}
        ></Middle>
        <Mvcont mvarr={this.state.mvarr}></Mvcont>
        <Footer></Footer>
      </>
    );
  }
}

export default Home;
